Odemknutí síly typografie: Hloubkový průvodce hodnotami vlastností písma v CSS a OpenType

Ve světě webdesignu je typografie často neopěvovaným hrdinou uživatelské zkušenosti. Pečlivě vybíráme rodiny písem, jejich řezy a velikosti, abychom vytvořili jasné a esteticky příjemné rozhraní. Ale co kdybychom mohli jít hlouběji? Co kdyby soubory písem, které denně používáme, skrývaly tajemství k bohatší, výraznější a profesionálnější typografii? Pravdou je, že skrývají. Tato tajemství se nazývají vlastnosti OpenType a CSS nám poskytuje klíče k jejich odemknutí.

Příliš dlouho se zdálo, že jemné ovládání, které si užívali tiskařští designéři – věci jako pravé kapitálky, elegantní volitelné ligatury a kontextové styly číslic – je pro web nedosažitelné. Dnes tomu tak již není. Tento komplexní průvodce vás vezme na cestu do světa hodnot vlastností písem v CSS a prozkoumá, jak můžete využít plnou sílu svých webových písem k vytvoření skutečně sofistikovaných a čitelných digitálních zážitků.

Co přesně jsou vlastnosti OpenType?

Než se ponoříme do CSS, je klíčové pochopit, co vlastně ovládáme. OpenType je formát písma, který může obsahovat obrovské množství dat nad rámec základních tvarů písmen, čísel a symbolů. V rámci těchto dat mohou návrháři písem vložit širokou škálu volitelných schopností nazývaných „vlastnosti“.

Představte si tyto vlastnosti jako vestavěné instrukce nebo alternativní návrhy znaků (glyfy), které lze programově zapínat a vypínat. Nejsou to žádné hacky nebo triky prohlížeče; jsou to záměrné designové volby typografa, který písmo vytvořil. Když aktivujete vlastnost OpenType, žádáte prohlížeč, aby použil specifickou část návrhu písma, která je určena pro konkrétní účel.

Tyto vlastnosti mohou sahat od čistě funkčních, jako je zlepšení čitelnosti lepším prokladem, až po čistě estetické, jako je přidání dekorativního prvku do nadpisu.

Brána v CSS: Vlastnosti vysoké úrovně a nízkoúrovňové ovládání

CSS poskytuje dva primární způsoby přístupu k vlastnostem OpenType. Moderním, preferovaným přístupem je použití sady sémantických vlastností vysoké úrovně. Existuje však také nízkoúrovňová, výkonná „univerzální“ vlastnost pro případy, kdy potřebujete maximální kontrolu.

Preferovaná metoda: Vlastnosti vysoké úrovně

Moderní CSS nabízí sadu vlastností pod zastřešujícím názvem `font-variant`, spolu s `font-kerning`. Jsou považovány za osvědčený postup, protože jejich názvy jasně popisují jejich účel, což činí váš kód čitelnějším a udržovatelnějším.

• font-kerning: Řídí použití informací o kerningu uložených v písmu.
• font-variant-ligatures: Ovládá běžné, volitelné, historické a kontextuální ligatury.
• font-variant-numeric: Ovládá různé styly pro číslice, zlomky a přeškrtnutou nulu.
• font-variant-caps: Ovládá varianty velkých písmen, jako jsou kapitálky.
• font-variant-alternates: Poskytuje přístup ke stylistickým alternativám a variantám znaků.

Hlavní výhodou těchto vlastností je, že prohlížeči říkáte, čeho chcete dosáhnout (např. `font-variant-caps: small-caps;`), a prohlížeč sám přijde na nejlepší způsob, jak to udělat. Pokud konkrétní funkce není k dispozici, prohlížeč si s tím dokáže elegantně poradit.

Mocný nástroj: `font-feature-settings`

Ačkoli jsou vlastnosti vysoké úrovně skvělé, nepokrývají každou jednotlivou dostupnou vlastnost OpenType. Pro kompletní kontrolu máme nízkoúrovňovou vlastnost `font-feature-settings`. Často je popisována jako nástroj poslední záchrany, ale je neuvěřitelně mocná.

Syntaxe vypadá takto:

font-feature-settings: "" , "" ;

• Značka vlastnosti: Čtyřznakový řetězec rozlišující velikost písmen, který identifikuje konkrétní vlastnost OpenType (např. `"liga"`, `"smcp"`, `"ss01"`).
• Hodnota: Obvykle celé číslo. Pro mnoho vlastností znamená `1` „zapnuto“ a `0` „vypnuto“. Některé vlastnosti, jako jsou stylistické sady, mohou přijímat jiné celočíselné hodnoty pro výběr konkrétní varianty.

Zlaté pravidlo: Vždy se nejprve pokuste použít vlastnosti vysoké úrovně `font-variant-*`. Pokud vlastnost, kterou potřebujete, není jejich prostřednictvím dostupná, nebo pokud potřebujete kombinovat vlastnosti způsobem, který vlastnosti vysoké úrovně neumožňují, sáhněte po `font-feature-settings`.

Praktická prohlídka běžných vlastností OpenType

Pojďme prozkoumat některé z nejužitečnějších a nejzajímavějších vlastností OpenType, které můžete ovládat pomocí CSS. U každé z nich si probereme její účel, její 4znakovou značku a CSS pro její povolení.

Kategorie 1: Ligatury - Elegantní spojování znaků

Ligatury jsou speciální glyfy, které kombinují dva nebo více znaků do jediného, harmoničtějšího tvaru. Jsou nezbytné pro předcházení nešikovným kolizím znaků a zlepšení plynulosti textu.

Standardní ligatury

• Značka: `liga`
• Účel: Nahradit běžné, problematické kombinace znaků jako `fi`, `fl`, `ff`, `ffi` a `ffl` jediným, speciálně navrženým glyfem. Toto je základní vlastnost pro čitelnost v mnoha písmech.
• CSS vysoké úrovně: `font-variant-ligatures: common-ligatures;` (často ve výchozím stavu zapnuto v prohlížečích)
• CSS nízké úrovně: `font-feature-settings: "liga" 1;`

Volitelné ligatury

• Značka: `dlig`
• Účel: Jedná se o ozdobnější a stylistické ligatury, například pro kombinace jako `ct`, `st` nebo `sp`. Nejsou nezbytné pro čitelnost a měly by být používány selektivně, často v nadpisech nebo logách, pro dodání nádechu elegance.
• CSS vysoké úrovně: `font-variant-ligatures: discretionary-ligatures;`
• CSS nízké úrovně: `font-feature-settings: "dlig" 1;`

Kategorie 2: Číslice - Správné číslo pro danou práci

Ne všechna čísla jsou si rovna. Dobré písmo poskytuje různé styly číslic pro různé kontexty a jejich ovládání je znakem profesionální typografie.

Minuskulní vs. Majuskulní číslice

• Značky: `onum` (Minuskulní), `lnum` (Majuskulní)
• Účel: Majuskulní číslice jsou standardní čísla, která vidíme všude – všechna mají stejnou výšku a zarovnávají se s velkými písmeny. Jsou ideální pro tabulky, grafy a uživatelská rozhraní, kde se čísla musí vertikálně zarovnávat. Minuskulní číslice mají naopak proměnlivou výšku s horními a dolními dotažnicemi, podobně jako malá písmena. To jim umožňuje plynule zapadnout do odstavce textu, aniž by na sebe příliš upozorňovaly.
• CSS vysoké úrovně: `font-variant-numeric: oldstyle-nums;` nebo `font-variant-numeric: lining-nums;`
• CSS nízké úrovně: `font-feature-settings: "onum" 1;` nebo `font-feature-settings: "lnum" 1;`

Proporcionální vs. Tabulkové číslice

• Značky: `pnum` (Proporcionální), `tnum` (Tabulkové)
• Účel: Toto řídí šířku čísel. Tabulkové číslice jsou neproporcionální – každé číslo zabírá přesně stejný horizontální prostor. To je klíčové pro finanční zprávy, kód nebo jakoukoli datovou tabulku, kde se čísla v různých řádcích musí dokonale zarovnat do sloupců. Proporcionální číslice mají proměnlivou šířku; například číslo '1' zabírá méně místa než číslo '8'. To vytváří rovnoměrnější mezery a je ideální pro použití v běžném textu.
• CSS vysoké úrovně: `font-variant-numeric: proportional-nums;` nebo `font-variant-numeric: tabular-nums;`
• CSS nízké úrovně: `font-feature-settings: "pnum" 1;` nebo `font-feature-settings: "tnum" 1;`

Zlomky a přeškrtnutá nula

• Značky: `frac` (Zlomky), `zero` (Přeškrtnutá nula)
• Účel: Vlastnost `frac` krásně formátuje text jako `1/2` do pravého diagonálního zlomkového glyfu (½). Vlastnost `zero` nahrazuje standardní '0' verzí s lomítkem nebo tečkou, aby ji bylo možné jasně odlišit od velkého písmene 'O', což je životně důležité v technické dokumentaci, sériových číslech a kódu.
• CSS vysoké úrovně: `font-variant-numeric: diagonal-fractions;` a `font-variant-numeric: slashed-zero;`
• CSS nízké úrovně: `font-feature-settings: "frac" 1, "zero" 1;`

Kategorie 3: Kerning - Umění mezer

Kerning

• Značka: `kern`
• Účel: Kerning je proces úpravy mezer mezi jednotlivými páry písmen za účelem zlepšení vizuálního dojmu a čitelnosti. Například v kombinaci „AV“ je V mírně zasunuto pod A. Většina kvalitních písem obsahuje stovky nebo tisíce těchto kerningových párů. Ačkoli je téměř vždy ve výchozím stavu povolen, můžete ho ovládat.
• CSS vysoké úrovně: `font-kerning: normal;` (výchozí) nebo `font-kerning: none;`
• CSS nízké úrovně: `font-feature-settings: "kern" 1;` (zapnuto) nebo `font-feature-settings: "kern" 0;` (vypnuto)

Kategorie 4: Varianty velikosti písmen - Více než jen velká a malá písmena

Kapitálky

• Značky: `smcp` (z malých písmen), `c2sc` (z velkých písmen)
• Účel: Tato vlastnost umožňuje pravé kapitálky, což jsou speciálně navržené glyfy, které mají výšku malých písmen, ale tvar velkých písmen. Jsou mnohem lepší než „falešné“ kapitálky vytvořené pouhým zmenšením plnohodnotných velkých písmen. Použijte je pro akronymy, podnadpisy nebo pro zdůraznění.
• CSS vysoké úrovně: `font-variant-caps: small-caps;`
• CSS nízké úrovně: `font-feature-settings: "smcp" 1;`

Kategorie 5: Stylistické alternativy - Dotek designéra

Zde se typografie stává skutečně expresivní. Mnoho písem přichází s alternativními verzemi znaků, které můžete zaměnit, abyste změnili tón nebo styl textu.

Stylistické sady

• Značky: `ss01` až `ss20`
• Účel: Toto je jedna z nejzajímavějších vlastností, ale je dostupná pouze prostřednictvím `font-feature-settings`. Návrhář písma může seskupit související stylistické alternativy do sad. Například `ss01` může aktivovat jednopatrové 'a', `ss02` může změnit ocásek u 'y' a `ss03` může poskytnout geometričtější sadu interpunkce. Možnosti jsou zcela na návrháři písma.
• CSS nízké úrovně: `font-feature-settings: "ss01" 1;` nebo `font-feature-settings: "ss01" 1, "ss05" 1;`

Swashe

• Značka: `swsh`
• Účel: Swashe jsou dekorativní, okázalé ozdoby přidané ke znakům, často na začátku nebo na konci slova. Jsou běžné u skriptových a ozdobných písem a měly by být používány velmi střídmě pro maximální dopad, například pro iniciálu nebo jedno slovo v logu.
• CSS nízké úrovně: `font-feature-settings: "swsh" 1;`

Jak zjistit dostupné vlastnosti v písmu

To vše je skvělé, ale jak zjistíte, které vlastnosti vámi zvolené písmo skutečně podporuje? Vlastnost bude fungovat pouze tehdy, pokud ji návrhář písma zabudoval do souboru písma. Zde je několik způsobů, jak to zjistit:

1. Vzorové stránky písmových služeb: Většina renomovaných písmolijen a služeb (jako Adobe Fonts, Google Fonts a komerční písmolijny) uvede a demonstruje podporované vlastnosti OpenType na hlavní stránce písma. To je obvykle nejjednodušší místo, kde začít.
2. Vývojářské nástroje prohlížeče: Moderní prohlížeče mají pro toto úžasné nástroje. V Chrome nebo Firefoxu prozkoumejte prvek, přejděte na kartu „Computed“ (Vypočtené) a sjeďte úplně dolů. Najdete sekci „Rendered Fonts“ (Vykreslená písma), která vám řekne, který soubor písma se používá. Ve Firefoxu je dedikovaná karta „Fonts“ (Písma), která explicitně vypíše každou dostupnou značku vlastnosti OpenType pro písmo vybraného prvku. To je neuvěřitelně mocný způsob, jak prozkoumat schopnosti písma naživo.
3. Nástroje pro analýzu písem na desktopu: Pro lokálně nainstalované soubory písem (`.otf`, `.ttf`) můžete použít specializované aplikace nebo webové stránky (jako wakamaifondue.com), které analyzují soubor písma a poskytnou vám podrobnou zprávu o všech jeho vlastnostech, podporovaných jazycích a glyfech.

Výkon a podpora prohlížečů

Dvě běžné obavy jsou výkon a kompatibilita s prohlížeči. Dobrou zprávou je, že obojí je vynikající.

• Podpora prohlížečů: Vlastnost `font-feature-settings` je již mnoho let široce podporována ve všech hlavních prohlížečích. Novější vlastnosti `font-variant-*` mají také vynikající podporu napříč všemi platformami. Můžete je používat s důvěrou.
• Výkon: Aktivace vlastností OpenType má zanedbatelný dopad na výkon vykreslování. Logika a alternativní glyfy jsou již v souboru písma, který byl stažen; pouze říkáte vykreslovacímu enginu prohlížeče, které instrukce má následovat. Náklady na výkon jsou ve velikosti samotného souboru písma, nikoli v používání vlastností, které obsahuje. Písmo s mnoha vlastnostmi může být větší soubor, ale jejich aktivace je v podstatě zdarma.

Osvědčené postupy a praktické poznatky

S velkou mocí přichází velká zodpovědnost. Zde je návod, jak používat vlastnosti písma efektivně a profesionálně.

1. Používejte vlastnosti pro postupné vylepšování

Přemýšlejte o vlastnostech OpenType jako o vylepšení. Váš text musí být dokonale čitelný a funkční i bez nich. Aktivace minuskulních číslic nebo volitelných ligatur jednoduše zvyšuje typografickou kvalitu pro uživatele v moderních prohlížečích a vytváří lepší, vybroušenější zážitek.

2. Kontext je vše

Neaplikujte vlastnosti globálně bez přemýšlení. Aplikujte správnou vlastnost na správném místě.

• Použijte minuskulní proporcionální číslice pro odstavce textu.
• Použijte majuskulní tabulkové číslice pro datové tabulky a ceníky.
• Použijte volitelné ligatury a swashe pro velké nadpisy, nikoli pro běžný text.
• Použijte kapitálky pro akronymy nebo štítky, aby lépe zapadly.

3. Organizujte pomocí vlastních vlastností CSS

Aby byl váš kód čistý a udržovatelný, definujte kombinace vlastností pomocí vlastních vlastností CSS (proměnných). To usnadňuje jejich konzistentní aplikaci a aktualizaci z jednoho centrálního místa.

Příklad:

            
:root {
  --font-features-body: "liga" 1, "onum" 1, "pnum" 1, "kern" 1;
  --font-features-heading: "liga" 1, "dlig" 1, "lnum" 1;
  --font-features-data: "lnum" 1, "tnum" 1, "zero" 1;
}

body {
  font-feature-settings: var(--font-features-body);
}

h1, h2, h3 {
  font-feature-settings: var(--font-features-heading);
}

.price, .code, .table-cell {
  font-feature-settings: var(--font-features-data);
}

            

              
                Copy
              
            
          

4. Klíčem je jemnost

Nejlepší typografie je často neviditelná. Cílem je zlepšit čitelnost a estetiku, aniž by se upozorňovalo na samotnou techniku. Vyhněte se pokušení zapnout každou dostupnou vlastnost. Několik dobře zvolených vlastností použitých ve správném kontextu bude mít mnohem větší dopad než chaotická směs všeho.

Závěr: Nová hranice webové typografie

Zvládnutí hodnot vlastností písma v CSS je pro každého webového vývojáře nebo designéra transformačním krokem. Posouvá nás za základní mechaniku nastavování velikostí a řezů písem do oblasti skutečné digitální typografie. Porozuměním a využíváním bohatých vlastností obsažených v našich písmech můžeme překlenout dlouholetou propast mezi tiskovým a webovým designem a vytvářet digitální zážitky, které jsou nejen funkční a přístupné, ale také typograficky krásné a sofistikované.

Takže až příště budete vybírat písmo pro projekt, nezastavujte se u toho. Ponořte se do jeho dokumentace, prozkoumejte ho pomocí vývojářských nástrojů svého prohlížeče a objevte skrytou sílu, kterou v sobě skrývá. Experimentujte s ligaturami, číslicemi a stylistickými sadami. Vaše pozornost věnovaná těmto detailům odliší vaši práci a přispěje k vytříbenějšímu a čitelnějšímu webu pro všechny.